<template>
	<view class="productDetails-page">
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"
				indicator-active-color="rgba(255,255,255,1)">
				<swiper-item v-for="item in infoData.ossVoList" :key="item">
					<div class="bannerimg">
						<PicturePreview :src="item.url" mode="aspectFill"/>
						<!-- <image :src="item.url" mode="aspectFill"></image> -->
					</div>
				</swiper-item>
			</swiper>
		</view>
		<view class="Details-tbody">
			<view class="product-header">
				<view class="product-price">
					<text class="icon">￥</text>
					<text class="price1">{{infoData.servicePrice}}</text>
					<text class="price2">￥{{infoData.originalPrice}}</text>
				</view>
				<view class="product-name">
					{{infoData.serviceName}}
				</view>
				<!-- <view class="product-ds">
					<text>局部调理</text> |
					<text>局部调理</text>
				</view> -->
				<view class="info-foot ">
					<view class="item">
						<view class="icon-box">
							<uv-icon name="clock" color="#666" size="18"></uv-icon>
						</view>
						<text>服务时长：</text>
						<text class="orange">{{infoData.serviceDate}}分钟</text>
					</view>
					<view class="item">
						<view class="icon-box">
							<uv-icon name="account" color="#666" size="24"></uv-icon>
						</view>
						超过
						<text class="orange">{{infoData.serviceSold}}</text>
						人选择
					</view>
				</view>
			</view>
			<view class="Richtext">
				<view class="Richtext-header flex-between flex-y-center">
					<text class="title">服务详情</text>
					<uv-button @click="goto3d" color="#5ebcbc" :customStyle="{'border-radius':'10rpx'}" size="mini">可视化系统演示</uv-button>
				</view>
				<view class="Richtext-cont">
					<view class="" v-html="infoData.serviceDetails"></view>
					 <!-- @preview="preview" @navigate="navigate" -->
					<!-- 富文本内容
					<image src="/static/images/jiao.png" mode="widthFix"></image> -->
				</view>
			</view>
		</view>
		<view class="" style="height: 140rpx;"></view>
		<view class="page-foot flex-y-center">
			<view class="home" @click="goHome">
				<image src="/static/images/nav1-active.png" mode="widthFix"></image>
				<text>首页</text>
			</view>
			<uv-button  color="#e36218"  :customStyle="{'border-radius':'20rpx'}">
				<uv-icon name="phone-fill" color="#fff" size="20"></uv-icon>
				<text>拨打电话</text>
			</uv-button>
			<uv-button @click="goto" color="#5ebcbc" :customStyle="{width:'364rpx','border-radius':'20rpx'}">
				<text>￥{{infoData.servicePrice}} </text>
				<text>立即预约</text>
			</uv-button>
		</view>
	</view>
</template>

<script>
	export default {
		  components: {
		  },
		data() {
			return {
               serviceId:null,
			   infoData:{}
			}
		},
		onLoad(option) {
		   //option 上个页面传递的参数。-- 跳转的服务详情页面,也可以从上一个直接获取,不用查询
		   this.serviceId = option.serviceId; //上个页面传递的参数。
		   this.getList();
		},
		methods: {
			async getList(){
				// 根据id查询情数据-数据
				const {code,data}=await this.muajax.zlServicePackId({},{
					urlRewrite:url=>`${url}/${this.serviceId}`
				});
				this.infoData=data
			},
			goto(){
				uni.navigateTo({
					url:'/pages/placeOrder/placeOrder'
				})
				this.$store.dispatch('saveData', {
					field: 'placeOrder',
					value:{
					...this.$store.state.placeOrder,
					menuIds:this.infoData.serviceId,
					appUserId:this.$store.state.userInfo.appUserId,
					orderPrice:this.infoData.servicePrice,
					ossIds:this.infoData.ossIds,
					serviceName:this.infoData.serviceName,
					servicePathIcon:this.infoData.servicePathIcon
					},
					// keep: true,
				})
			},
			
			goHome(){
				uni.switchTab({
					url:'/pages/home/home'
				})
			},
			
			// 调转3d
			goto3d(){
				uni.navigateTo({
					url:'/technicianPages/Reflection/Reflection?type=1'
				})
			},

		}
	}
</script>

<style scoped lang="less">
	page {
		background: #f1f1f1;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.banner {
		width: 100%;
		height: 350rpx;
		position: relative;

		.swiper {
			height: 100%;
		}

		.bannerimg {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.Details-tbody {
		padding: 0px 30rpx;
		position: relative;
		top: -120rpx;
		z-index: 2;

		.product-header {
			background-image: linear-gradient(180deg,
					#ffeded 0%,
					#ffffff 100%),
				linear-gradient(#f6f6f6,
					#f6f6f6);
			background-blend-mode: normal,
				normal;
			border-radius: 10rpx;
			padding: 30rpx;
			padding-bottom: 0px;
			box-sizing: border-box;
		}

		.product-price {
			.icon {
				color: #e66018;
			}

			.price1 {
				font-size: 54rpx;
				color: #e66018;
			}

			.price2 {
				color: #666;
				text-decoration: line-through;
				margin-left: 10rpx;
			}
		}

		.product-name {
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 35rpx;
		}

		.product-ds {
			margin: 20rpx 0px;
			color: #666;
		}

		.info-foot {
			height: 85rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #666;
			border-top: 1px solid #f1f1f1;
			font-size: 24rpx;

			.item {
				display: flex;
				align-items: center;
			}

			.icon-box {
				margin-right: 10rpx;
			}

			.orange {
				color: #ff7800;
			}
		}
	}

	.Richtext {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 30rpx;

		.Richtext-header {
			border-bottom: 1px solid #f1f1f1;
			height: 88rpx;
			padding: 0px 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.more-btn {
				padding: 10rpx;
				background-color: #5ebcbc;
				border-radius: 10rpx;
				color: #fff;
			}
		}
	}

	.Richtext-cont {
		padding: 20rpx;
		box-sizing: border-box;
		min-height: 400rpx;
	}

	.page-foot {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		z-index: 999;
		height: 121rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 3rpx 0rpx rgba(0, 0, 0, 0.35);
		padding: 0px 30rpx;
		justify-content: space-between;
		box-sizing: border-box;
		.home {
			color: #5ebcbc;
		}
}
</style>